<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
    <script src="links.js"></script>
    <script src="datas.js"></script>
    <style>
      body, canvas {
        padding: 0;
        margin: 0;
      }
    </style>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
      const main = document.getElementById('main')
      main.style.width = window.innerWidth + 'px'
      main.style.height = window.innerHeight + 'px'
      var myChart = echarts.init(main);
      option = {
        series: [{
          type: 'graph',
          layout: 'force',
          animation: false,
          roam: true,
          data: datas,
          force: {
            repulsion: 100,
            edgeLength: 5
          },
          edges: links,
          lineStyle: {
            curveness: 0.1
          }
        }]
      };
      myChart.setOption(option);
    </script>
</body>
</html>